custom font 적용

개요

현재 준비 중인 서비스의 브랜드 폰트로 Min Sans를 사용하고 있는데 React Native에 적용하는 과정에서 오류가 발생하여 해결한 사항이다.

문제

1. ttf 폰트를 적용했을 때 ios와 안드로이드가 동일하게 적용되지 않는 상황이었다.
2. (미해결) ios에서는 ExtraLight가 적용되지 않는다.

해결

1. 참고
   • Min Sans의 폰트는 otf와 ttf로 나뉘어 제공되는데 RN에서는 둘 다 적용가능하다.
   • 하지만 Min Sans에서 제공하는 ttf는 하나의 파일에 여러 font-weight가 적용되어 있었는데 ios에서는 fontfamily에 PostScript Name을 적용 가능했으나 안드로이드에서는 적용이 되지 않았다.
   • (중요) otf를 사용하거나 otf를 ttf로 변환하여 적용해볼 수 있는데 폰트명은 font idetifiers 정보에 나와있는 PostScript Name으로 적용해야한다.

2. 프로젝트 폴더 내, 글꼴 디렉토리 생성 : mkdir -p ./assets/fonts

3. 디렉토리 내 폰트 파일 추가

4. react-native.config.js 작성

module.exports = {
    project: {
        ios: {},
        android: {},
    },
    assets: ['./assets/fonts/'],
};

6. 프로젝트 assets 연동 : npx react-native-asset

7. style 적용